﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TimePickerTesting._Default" %>

<%@ Register assembly="TimePicker" namespace="MKB.TimePicker" tagprefix="MKB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>.NET TimePicker Control</title>
    <style type="text/css">
        body
        {
            background-color: whitesmoke;
            font-family: arial;
            font-size: 10pt;
        }
        
        td
        {
            font-family: arial;
            font-size: 10pt;
        }
        
        .codebehind
        {
        	font-size:8pt;
        	color:Blue;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
    <div>
        <h2>.NET Time Picker Control</h2>
        I wrote this control from a need for my wife (a Photographer) to have a method to schedule appointments on her website.
        There might be some other solutions but to me, this was the most user friendly idea I came 
        up with for scheduling the time of the appointment. <br /><br />
        I've got a todo list for it such as
        allowing military format, and making it databindable. I will release new versions here as I get them done. 
        <br /><br />
        <span style="font-size:14pt;">New! <A href="http://208.101.58.223:8000/" target="_blank">TimePicker Documentation</A></span>
        <br /><br />
        You can see a sample of what is does below:<br /><br />
        
        Formview Template:
        <asp:FormView ID="FormView1" runat="server" DefaultMode="ReadOnly">
            <ItemTemplate><MKB:TimeSelector ID="TimeSelector30" LoadZeroSecondsInitially="true" runat="server" ReadOnly="True" /></ItemTemplate>
            <EditItemTemplate><MKB:TimeSelector ID="TimeSelector40" LoadZeroSecondsInitially="true" runat="server" /></EditItemTemplate>
            <InsertItemTemplate><MKB:TimeSelector ID="TimeSelector50" LoadZeroSecondsInitially="true" runat="server" /></InsertItemTemplate>
        </asp:FormView>
        <br /><br />
        <asp:Button ID="btnSwitchToItemViewMode"
            runat="server" Text="Switch To Item View Mode" 
            onclick="btnSwitchToItemViewMode_Click" />
        <asp:Button ID="btnSwitchToEditMode" runat="server" Text="Switch To Edit Mode" 
            onclick="btnSwitchToEditMode_Click" />
        <asp:Button ID="btnSwitchToInsertMode" runat="server" 
            Text="Switch To Insert Mode" onclick="btnSwitchToInsertMode_Click" />
        <br /><br /><br />
        <table width="1000">
            <tr>
                <td>
                    Clock Mode (sets the control to read only from the users standpoint):<br />
                    <MKB:TimeSelector ID="TimeSelector1" LoadZeroSecondsInitially="true" EnableClock="true" runat="server" />
                    <asp:Label ID="lblTS1" runat="server" Text="Postback value: " BackColor="#FFFF99" Width="359px" />
                    <br /><br />
                </td>
                <td>
                    DisplaySeconds property set to false:<br />
                    <MKB:TimeSelector ID="TimeSelector4" LoadZeroSecondsInitially="true" DisplaySeconds="false" runat="server" />
                    <asp:Label ID="lblTS4" runat="server" Text="Postback value: " BackColor="#FFFF99" Width="359px" />
                    <br /><br />
                </td>
            </tr>
            <tr>
                <td>
                    Preset Date/Time:<br />
                    <MKB:TimeSelector ID="TimeSelector2" runat="server" Date="05/10/10 2:35:35 PM" MinuteIncrement="15" 
                    AllowSecondEditing="true" />
                    <asp:Label ID="lblTS2" runat="server" Text="Postback value: " BackColor="#FFFF99" Width="359px" />
                    <br /><br />
                </td>
                <td>
                    SelectedTimeFormat set to TwentyFour:<br />
                    <MKB:TimeSelector ID="TimeSelector5" LoadZeroSecondsInitially="true" EnableClock="false" SelectedTimeFormat="TwentyFour" runat="server" />
                    <asp:Label ID="lblTS5" runat="server" Text="Postback value: " BackColor="#FFFF99" Width="359px" />
                    <br /><br />
                </td>
            </tr>
            <tr>
                <td valign="top">
                    Microsoft AJAX .NET Example:
                    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                        <ProgressTemplate>
                            Updating...
                        </ProgressTemplate>
                    </asp:UpdateProgress>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="btnAjax" />
                        </Triggers>
                        <ContentTemplate>
                            <table><tr><td><MKB:TimeSelector ID="TimeSelector6" runat="server" Date="05/10/10 2:35:35 PM" MinuteIncrement="15" 
                                AllowSecondEditing="true" /></td><td><asp:Button runat="server" ID="btnAjax" CausesValidation="false" Text="AJAX Update!" 
                                onclick="btnAjax_Click" /><br /></td></tr></table>
                            <asp:Label ID="lblAjax" runat="server" Text="Postback value: " BackColor="#FFFF99" Width="359px" />
                        </ContentTemplate>
                    </asp:UpdatePanel>
                    <br /><br />
                </td>
                <td rowspan="2">
                    Validator Example, AllowSecondEditing set to false:<br />
                    <MKB:timeselector ID="TimeSelector3" runat="server" MinuteIncrement="15" />
                    <asp:Label ID="lblTS3" runat="server" Text="Postback value: " BackColor="#FFFF99" Width="359px" />
                    <MKB:TimeSelectorAvailabilityValidator ID="TimeSelectorAvailabilityValidator1" 
                        runat="server" ControlToValidate="TimeSelector3" Display="Dynamic" ErrorMessage="Poop! That time is already taken!" />
                        
                     <br />
                    <br />
                            Validator Code Behind:
                     <br /><span class="codebehind">
                    List<DateTime> list = new List<DateTime>();
                            <br />
                            list.Add(DateTime.Now);
                            <br />
                            list.Add(DateTime.Now.AddSeconds(30));
                            <br />
                            list.Add(DateTime.Now.AddMinutes(30));
                            <br />
                            list.Add(DateTime.Now.AddHours(3));

                            <br />
                    <br />
                            TimeSelectorAvailabilityValidator1.AppointmentList = list;
                            <br />
                    TimeSelectorAvailabilityValidator1.AppointmentLengthInMinutes = 90;
                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    Visual Settings (BackColor, BorderColor, ButtonSettings):<br />
                    <MKB:TimeSelector ID="TimeSelector7" BackColor="Beige" BorderColor="Black" runat="server">
                        <ButtonSettings DownImageURL="~/images/CustomDown.gif" UpImageURL="~/images/CustomUp.gif"
                        DownOverImageURL="~/images/CustomDown-over.gif" UpOverImageURL="~/images/CustomUp-over.gif" />
                    </MKB:TimeSelector>
                    <asp:Label ID="lblTS7" runat="server" Text="Postback value: " BackColor="#FFFF99" Width="359px" />
                    <br /><br />
                </td>
            </tr>
        </table>
        
        
        
        
        <br /><br />
        Download the control <a href="TimePicker.rar">here</a>.
    
    </div>
    
    
    </div>
    <asp:Button ID="Button1" runat="server" Text="Postback Value Persistence Test" onclick="Button1_Click" />
    </form>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-846544-6");
pageTracker._trackPageview();
} catch(err) {}</script></body>
</html>
